<template>
  <el-row class="user" v-loading="loading">
    <!--基本信息-->
    <el-card class="box-card">
      <div slot="header">
        <span>基本信息</span>
      </div>
        <el-form label-width="100px">
          <el-form-item>
            <el-col>
                <img src="http://172.16.1.62/LUGCart/static/images/user/user_default_avatar.png" alt="用户头像"
                     style="width: 80px;height: 80px; display: block; position: relative; left: -90px; height: 80px;">
              <el-col :offset="1">
                <div class="user-name" style="position: absolute;top: 20px;">{{user.user_name}}</div>
              </el-col>
            </el-col>
          </el-form-item>

          <el-form-item label="会员ID">
            <el-col :offset="1">
              {{user.user_id}}
            </el-col>
          </el-form-item>
          <!--<el-form-item label="等级">-->
            <!--<el-col :offset="1">-->
              <!--<el-col :span="1">-->
                <!--<el-col v-if="parseInt(this.user.user_level)=== 1">普通会员</el-col>-->
                <!--<el-col v-if="parseInt(this.user.user_level)=== 2">黄金会员</el-col>-->
              <!--</el-col>-->
              <!--<el-col :span="12"><el-dropdown @command="changeLevel">-->
                                <!--<span class="el-dropdown-link">-->
                                    <!--修改会员等级<i class="el-icon-arrow-down el-icon&#45;&#45;right"></i>-->
                                <!--</span>-->
                <!--<el-dropdown-menu slot="dropdown">-->
                  <!--<el-dropdown-item command="1">普通</el-dropdown-item>-->
                  <!--<el-dropdown-item command="2" divided>黄金</el-dropdown-item>-->
                <!--</el-dropdown-menu>-->
              <!--</el-dropdown></el-col>-->
            <!--</el-col>-->

          <!--</el-form-item>-->
          <el-form-item label="会员等级">
            <el-col :offset="1">
              <el-radio-group v-model="user.user_level" @change="changeLevel">
                <el-radio :label="1">普通会员</el-radio>
                <el-radio :label="2">黄金会员</el-radio>
              </el-radio-group>
            </el-col>
          </el-form-item>
          <el-form-item label="会员手机">
            <el-col :offset="1">
              {{user.user_phone}}
            </el-col>
          </el-form-item>
          <el-form-item label="邮箱地址">
            <el-col :offset="1">
              {{user.user_email}}
            </el-col>
          </el-form-item>
          <el-form-item label="性别">
            <el-col :offset="1">
              {{user.user_sex}}
            </el-col>
          </el-form-item>
          <el-form-item label="出生日期">
            <el-col :offset="1">
              {{user.user_birthday}}
            </el-col>
          </el-form-item>
          <el-form-item label="注册时间">
            <el-col :offset="1">
              {{user.created_at}}
            </el-col>
          </el-form-item>

          <el-form-item label="上级经销商">
            <el-col :offset="1">
              {{user.user_pid}}
            </el-col>
          </el-form-item>
          <el-form-item label="账户状态">
            <el-col :offset="1">
              <el-switch
                @change="changeStatus"
                v-model="user.user_status"
                :active-value="1"
                :inactive-value="0"
                inactive-color="#ff4949">
              </el-switch>
            </el-col>
          </el-form-item>
          <el-form-item label="身份认证">
            <el-col :offset="1">
              <el-col v-if="this.user.is_validate"> 已认证</el-col>
              <el-col v-else>未认证</el-col>
            </el-col>
          </el-form-item>
        </el-form>
    </el-card>
    <el-col class="user-blank"></el-col>
    <!--用户数据-->
    <el-card class="box-card">
      <div slot="header">
        <span>会员数据</span>
      </div>
        <el-table  :data="user.data">
          <el-table-column prop="level" label="会员等级">
          </el-table-column>
          <el-table-column prop="score" label="积分">

          </el-table-column>
          <el-table-column prop="left" label="普通余额">

          </el-table-column>
          <el-table-column prop="limited" label="限定余额">

          </el-table-column>
          <el-table-column prop="orders" label="订单数">

          </el-table-column>
          <el-table-column prop="coupon" label="可用优惠券">

          </el-table-column>
          <el-table-column prop="last_login" label="最近登陆时间">

          </el-table-column>

        </el-table>
    </el-card>
    <el-col class="user-blank"></el-col>
    <!--用户信息-->
    <el-card class="box-card">
      <div slot="header">
        <span>用户信息</span>
      </div>
      <div style="width: 60%">
        <el-table  :data="user.info">
          <el-table-column prop="baby_status" label="孕育状态" ></el-table-column>
          <el-table-column prop="baby_name" label="宝宝小名" ></el-table-column>
          <el-table-column prop="baby_birthday" label="宝宝生日" ></el-table-column>
          <el-table-column prop="parent" label="爸爸or妈妈" ></el-table-column>
        </el-table>
      </div>

    </el-card>
    <el-col class="user-blank"></el-col>
    <!--用户地址-->
    <el-card class="box-card">
      <div slot="header">
        <span>地址信息</span>
      </div>
        <el-table  :data="user.address">
          <el-table-column prop="name" label="收件人"></el-table-column>
          <el-table-column prop="date" label="联系方式"></el-table-column>
          <el-table-column prop="address" label="详细地址"></el-table-column>
        </el-table>
    </el-card>
    <el-button type="primary" style="float: right" @click="goToUserList">返回列表</el-button>
  </el-row>
</template>
<script>
  import { viewUser, editUser } from '../../api/api'

  export default {
    data () {
      return {
        loading: false,
        user: [],
        is_validate: true
      }
    },
    methods: {
      //  获取用户信息
      getUser () {
        this.loading = true
        let id = this.$route.params.id
        viewUser(id).then((res) => {
          this.user = res.data
          this.user.data = [
            {
              level: '普通会员',
              score: 888,
              left: 222,
              limited: 999,
              orders: 0,
              coupon: 2,
              last_login: '2017 - 12 - 12'
            }
          ]
          this.user.address = [{
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
          }, {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          }]
          this.user.info = [{baby_status: '孕育中', baby_name: '小宝贝', baby_birthday: '2017-12-12', parent: '妈妈'}]
          this.loading = false
        })
      },
      changeStatus () {
        console.log(this.user)
        editUser(this.user).then((res) => {
          console.log(res)
          if (parseInt(res.status) === 1) {
            this.$message({
              message: '修改成功',
              type: 'success'
            })
          } else {
            this.$message.error('保存失败！错误代码:' + res.errorCode)
            this.user.user_status = Number(!this.user.user_status)
          }
        })
      },
      changeLevel (userLevel) {
        console.log(userLevel)
        let level = this.user.user_level
        this.user.user_level = userLevel
        editUser(this.user).then((res) => {
          if (parseInt(res.status) === 1) {
            this.$message({
              type: 'success',
              message: '修改成功'
            })
          } else {
            this.$message.error('修改失败！错误代码:' + res.errorCode)
            this.user.user_level = level
          }
        })
      },
      goToUserList () {
        console.log(1)
        this.$router.push({path: '/users'})
      }
    },
    mounted () {
      this.getUser()
    }
  }
</script>

<style scoped lang="sass">
  .user
    width: 100%
    .user-blank
      height: 20px
      background-color: #f6fafd
    .el-dropdown-link
      cursor: pointer
      color: #409EFF
    .el-icon-arrow-down
      font-size: 12px
    .el-form-item
      margin-bottom: 0px
    .el-form-item__content
      padding-left: 30px

</style>
